import React from "react"
import { Icon, Spin, Alert } from 'antd'
import {messages} from "share/common";
import {connect} from "react-redux";
import {message} from "antd/lib/index";

import ReportService from "containers/report-list/report-list.service";
import "styles/report-list/report-list.scss";
import menuRoute from "routes/menuRoute";
class ReportListDetails extends React.Component{
  constructor(){
    super();
    this.state = {
      loading: false,
      iframe:{
        iframeHeight:0,
        reportData:[],
        token:"",
        access_token:"",
        iframeURL:""
      },
      info: {
        deReportName: null,
        newReportName: null,
        deprecateDate: null,
        newReportPath: null,
      },
    };
    this.reportList = menuRoute.getRouteItem('report-list', 'key');
  }
  componentWillMount() {
    this.reSize();
    this.getURL();
  }

  getURL = () => {
    this.setState({loading: true});
    const {iframe} = this.state;
    ReportService.getAllotReportDetail(this.props.params.reportLineOID).then((response) => {
      if(response.data && response.data.reportHeadDTO){
        if(response.data.reportHeadDTO.reportUrl) {
          iframe.reportData = response.data;
          iframe.token = this.props.token;
          if (iframe.token && iframe.token.access_token) {
            iframe.access_token = iframe.token.access_token;
            iframe.iframeURL = iframe.reportData.reportHeadDTO.reportUrl + '?showHeader=false&isTitle=false&isControl=false&standalone=true&isManager=false&user_token=' + iframe.access_token;
          } else {
            message.error(messages('common.operate.filed'));
          }
        }
        if(response.data.reportHeadDTO.code) {
          this.getReportNote(response.data.reportHeadDTO.code);
        }
        } else {
        message.error(messages('common.operate.filed'));
      }
      this.setState({
        loading: false,
        iframe: iframe
      })
    });
  };

  getReportNote = (code) => {
    ReportService.getReportNote(code)
      .then(res => {
        if(res && res.data){
          this.setState({
            info: res.data,
          })
        }

      })
      .catch(err => {

      });
  };

  reSize = () => {
    this.setState({
      iframe:{
        iframeHeight:document.documentElement.clientHeight
      }
    })
  };

  openNewWindow = () => {
    const {info} = this.state;
    window.open(info.newReportPath, '_blank')
  };

  render(){
    const { iframe, loading, info } = this.state;
    let offline = new Date(new Date(`${info.deprecateDate}`).toLocaleDateString()).getTime();
    let now = new Date(new Date().toLocaleDateString()).getTime();
    let bool = (offline >= now);
    let description =
      <div>
        <div>{messages('report-list.key9',{arg1: info.deReportName,arg2: info.deprecateDate})/*用户您好，您当前查看的 {arg1} 将于 {arg2} 下线*/}</div>
        <div>{messages('report-list.key7')/*届时您可以前往 数据中心-报表 查看*/}
          &nbsp;<a href='javascript:void(0)' onClick={this.openNewWindow}>{info.newReportName}</a>&nbsp;
        </div>
        <div>{messages('report-list.key8')/*如果您无法查看新报表，请咨询您的管理员为您开通 数据中心-报表 菜单权限，祝您生活愉快*/}</div>
      </div>;
    return(
      <div className="report-list">
        {
          info.newReportPath &&
            <Alert
              style={{marginBottom: 20}}
              message={description}
              type="info"
              showIcon
            />
        }
        {
          info.deprecateDate ?
            bool &&
            <Spin spinning={loading}>
              <iframe src={iframe.iframeURL}
                      height={iframe.iframeHeight + "px"}
                      className="report-list-iframe">
              </iframe>
            </Spin>
            :
            <Spin spinning={loading}>
              <iframe src={iframe.iframeURL}
                      height={iframe.iframeHeight + "px"}
                      className="report-list-iframe">
              </iframe>
            </Spin>
        }
        <div style={{fontSize: 14,margin: '20px 0',}}>
          <a onClick={() => {this.context.router.push(this.reportList.url)}}><Icon type="rollback" />{messages("common.back")/*返回*/}</a>
        </div>
      </div>
    )
  }
}
ReportListDetails.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    token : state.main.authToken,
  }
}

export default connect(mapStateToProps)(ReportListDetails);
